/*
 * @Author: fanjs
 * @Date: 2025-03-18 11:12:32
 * @Description:
 */

/*
 * @Author: fanjs
 * @Date: 2025-03-18 11:12:24
 * @Description:
 */
import { Input, Button, addToast } from "@heroui/react";
import React, { useState } from "react";
import { SvgIcon } from '@/components/SvgIcon'
import { localStg } from '@/utils/storage';
import { useNavigate } from "react-router-dom";
import { registerApi } from "@/service/api";
import { isPhone, isPassword } from '@/utils/validate';

interface LoginComponentProps {
  CustomStyle: any;
}
const iconNames = 'text-default-500 mb-[2px] pointer-events-none flex-shrink-0'
const LoginComponent: React.FC<LoginComponentProps> = ({ CustomStyle }) => {
  const navigate = useNavigate()

  const [isLoading, setIsLoading] = useState(false);

  const [phone, setPhone] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [authCode, setAuthCode] = useState<string>('');

  // 注册
  const onRegister = async () => {
    setIsLoading(true);

    if (!isPhone(phone)) {
      addToast({ title: "请输入正确的手机号码" })
      setTimeout(() => setIsLoading(false), 1000);
      return;
    }

    // 密码长度至少6位，包含字母、数字
    if (!isPassword(password)) {
      addToast({ title: "密码须包含字母和数字，且长度至少6位" })
      setTimeout(() => setIsLoading(false), 1000);
      return;
    }

    if (!authCode) {
      addToast({ title: "请输入授权码" })
      setTimeout(() => setIsLoading(false), 1000);
      return;
    }

    try {
      const { data } = await registerApi(phone, password, authCode)
      if (data) {
        localStg.set('token', data.token)
        localStg.set('user', data.user)
        addToast({ title: "注册成功，自动登录中" })
        setTimeout(() => navigate('/distribute'), 1000);
      }
    } finally {
      setTimeout(() => setIsLoading(false), 1000);
    }
  }

  return (
    <div className="px-3">
      <Input
        value={phone}
        onValueChange={setPhone}
        className="w-full mt-4"
        classNames={CustomStyle}
        label="手机号码"
        radius="lg"
        type="phone"
        placeholder="您的手机号码将作为主账号登录"
        startContent={
          <SvgIcon icon="line-md:phone-call" className={iconNames} />
        }
      />

      <Input
        value={password}
        onValueChange={setPassword}
        className="w-full mt-4"
        classNames={CustomStyle}
        label="登录密码"
        radius="lg"
        type="phone"
        placeholder="输入并牢记您的登录密码"
        startContent={
          <SvgIcon icon="line-md:emoji-neutral" className={iconNames} />
        }
      />

      <Input
        className="mt-4 w-full"
        classNames={CustomStyle}
        value={authCode}
        onValueChange={setAuthCode}
        label="授权码"
        placeholder="请输入授权码注册"
        radius="lg"
        startContent={
          <SvgIcon icon="line-md:alert-circle-loop" className={iconNames} />
        }
      />

      <div className="flex items-center justify-end mt-4">
        <Button color="secondary" isLoading={isLoading} isDisabled={isLoading} onPress={onRegister}>
          注 册
        </Button>
      </div>
    </div>
  )
}

export default LoginComponent
